<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>想法合集</title>
        <style media="screen">
            body {
                margin: 0;
                font-size: 50px;
            }
            /* 顶栏导航 */
            .navigation {
                width: 100%;
                background-color: #febb41;
                position: fixed;
                z-index: 5;
                display: flex;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
            }
            .navigation a {
                flex:1;
                text-align: center;
                text-decoration: none;
                color: white;
                padding: 10px;
            }
            /* 标题 */
            .top {
                background-color: #feda41;
                width:100%;
                overflow: auto;
            }
            .top_title {
                padding-top: 90px;
                padding-left: 30px;
                font-size: 90px;
                font-weight: 900;
                margin-top: 50px;

            }
            .top p {
                color: white;
                padding-left: 30px;
                padding-bottom: 30px;
                font-size: 40px;
            }
            /* 代码链接部分 */
            .code {
                width:33%;
                margin-left: 62%;
                margin-top: 20px;
                margin-bottom: 20px;
                background-color: #ff9900;
                border-radius:35px;
                height:70px;
                text-align: center;
            }
            .code a {
                text-decoration: none;
                color: white;
                padding-left: 20px;
            }
            /* 标签导航 */
            .nav {
                display: flex;
                width: 100%;
                overflow: hidden;
                overflow-x:scroll;
            }
            .nav_content {
                border-radius: 10px;
                background-color: pink;
                display: block;
                margin: 2%;
                white-space: nowrap;
                padding: 1% 3% 1% 3%;
            }
            .content {
                margin: 2%;
                border-radius: 10px;
                padding: 2%;
                box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
                margin-bottom: 15px;
                border-left: 10px solid #feda41;
            }
        </style>
    </head>
    <body>
        <!-- 顶栏 -->
        <div class="navigation">
            <a href="http://www.yueqingyang.ink/third">上一个</a>
            <a href="http://www.yueqingyang.ink/">首页</a>
            <a href="https://gitee.com/yue-qingyang/portfolio-project">下一个</a>
        </div>
        <!-- 标题 -->
        <div class="top">
            <div class="top_title">
                那些日常的胡思乱想
            </div>
            <p>--100个左右未完成的想法，体现个人乐于探索</p>
        </div>
        <!-- 码云链接 -->
        <div class="code">
            <a href="https://gitee.com/yue-qingyang/portfolio-project">代码细节></a>
        </div>
        <!-- 标签导航 -->
        <div class="nav">
            <div class="nav_content" id = "n0">
                全部
            </div>
            <div class="nav_content" id = "n1">
                新技术 & 新时代
            </div>
            <div class="nav_content" id = "n2">
                可视化和视觉
            </div>
            <div class="nav_content" id = "n3">
                医疗
            </div>
            <div class="nav_content" id = "n4">
                学习和任务管理
            </div>
            <div class="nav_content" id = "n5">
                情感
            </div>
            <div class="nav_content" id = "n6">
                生活
            </div>
            <div class="nav_content" id = "n7">
                游戏和游戏化
            </div>
        </div>
        <div class="content_box" id = "c1">
        </div>
        <div class="content_box" id = "c2">
        </div>
        <div class="content_box" id = "c3">
        </div>
        <div class="content_box" id = "c4">
        </div>
        <div class="content_box" id = "c5">
        </div>
        <div class="content_box" id = "c6">
        </div>
        <div class="content_box" id = "c7">
        </div>
        <!-- nav 点击切换内容 -->
        <script type="text/javascript">
            function g(Class) {
                var x = document.getElementsByClassName(Class);
                return x[0];
            }
            // 核心就是比较 id 的值
            var contents = document.getElementsByClassName("content_box")
            console.log(contents)
            var displayBlock = function(x) {
                for (var i = 0; i < contents.length; i++) {
                    var b = contents[i]
                    var contentId = b.id
                    // 如果 x 空白，则点击位置没有导航标签
                    if (x == "") { break }
                    var compareN = x[1]
                    var compareC = contentId[1]
                    // 如果为 0 说明点击了全部
                    if (compareN == "0") {
                        b.style.display = "block"
                        continue
                    }
                    // 以上都未发生，正常比较，一致为 block，不一致为 none
                    if (compareN == compareC) {
                        b.style.display = "block"
                    } else {
                        b.style.display = "none"
                    }
                }
            }

             g("nav").onclick = function(e) {
                 var target = e.target
                 var targetId = target.id

                 displayBlock(targetId)
             }
        </script>
        <!-- 内容加载 -->
        <script type="text/javascript">
            //创建一个 ajax 对象
            // 参数是一个请求
            var ajax = function(request) {
                // request “请求”是一个对象，有以下属性
                // method:请求方法，string
                // url: 请求路径, string
                // data: 发送的请求数据(非GET方法), string
                // callback: 处理请求的回调函数, function
                var r = new XMLHttpRequest()
                r.open(request.method, request.url, true)
                //内容类型
                if (request.contentType !== undefined) {
                    r.setRequestHeader('Content-Type', request.contentType)
                }
                r.onreadystatechange = function(event) {
                    if(r.readyState === 4) {
                        request.callback(r.response)
                    }
                }
                // 判断是get要数据，还是post发数据
                if (request.method === "GET") {
                    r.send()
                } else {
                    r.send(request.data)
                }
            }
            var divList = document.getElementsByClassName("content_box")

            var insertContent = function(contents, num) {
                var html = ""
                for (var i = 0; i < contents.length; i++) {
                    var b = contents[i]
                    var content = b.content
                    var inserthtml = `
                    <div class="content">
                        ${content}
                    </div>
                    `
                    html += inserthtml
                }
                var div = divList[num]
                div.innerHTML = html
            }
            var getNew = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/4/new",
                    contentType: "application/json",
                    callback: function(response) {
                        var temp = JSON.parse(response)
                        insertContent(temp, 0)
                    }
                }
                ajax(request)
            }
            var getDisplay = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/4/display",
                    contentType: "application/json",
                    callback: function(response) {
                        var temp = JSON.parse(response)
                        insertContent(temp, 1)
                    }
                }
                ajax(request)
            }
            var getMedicine = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/4/medicine",
                    contentType: "application/json",
                    callback: function(response) {
                        var temp = JSON.parse(response)
                        insertContent(temp, 2)
                    }
                }
                ajax(request)
            }
            var getLearn = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/4/learn",
                    contentType: "application/json",
                    callback: function(response) {
                        var temp = JSON.parse(response)
                        insertContent(temp, 3)
                    }
                }
                ajax(request)
            }
            var getEmotion = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/4/emotion",
                    contentType: "application/json",
                    callback: function(response) {
                        var temp = JSON.parse(response)
                        insertContent(temp, 4)
                    }
                }
                ajax(request)
            }
            var getLife = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/4/life",
                    contentType: "application/json",
                    callback: function(response) {
                        var temp = JSON.parse(response)
                        insertContent(temp, 5)
                    }
                }
                ajax(request)
            }
            var getGame = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/4/game",
                    contentType: "application/json",
                    callback: function(response) {
                        var temp = JSON.parse(response)
                        insertContent(temp, 6)
                    }
                }
                ajax(request)
            }
            getNew()
            getDisplay()
            getMedicine()
            getLearn()
            getEmotion()
            getLife()
            getGame()
        </script>
    </body>
</html>
